<template>
  <el-dialog 
    :title="dialogStatus" 
    :visible.sync="dialogFormVisible" 
    width="60%">
    <el-form 
      label-position="left" 
      label-width="120px" 
      style="width: 600px; margin-left:50px;">

      <el-form-item 
        v-if="Form.avatar!=''" 
        :label="$t('user.avatar')">
        <img 
          :src="Form.avatar" 
          :preview-text="$t('user.avatar')" 
          preview="1" 
          style="width: 100px;height: 100px">
      </el-form-item>

      <el-form-item :label="$t('user.nickname')" >
        <span>{{ Form.nickname }}</span>
      </el-form-item>

      <el-form-item :label="$t('user.mobile')" >
        <span>{{ Form.mobile }}</span>
      </el-form-item>

      <el-form-item :label="$t('user.createtime')" >
        <span>{{ Form.createtime }}</span>
      </el-form-item>

      <el-form-item :label="$t('user.goodat')" >
        <span>{{ Form.goodat }}</span>
      </el-form-item>

      <el-form-item :label="$t('user.joblimit')" >
        <span>{{ Form.joblimit }}</span>
      </el-form-item>

      <el-form-item :label="$t('user.userType')" >
        <span>{{ Form.userType| userType }}</span>
      </el-form-item>

      <el-form-item 
        v-if="Form.userType==1" 
        label="下级理财师" >
        <el-table
          :data="Form.son"
          border
          style="width: 100%">
          <el-table-column
            prop="nickname"
            label="姓名"
            width="80" 
            align="center"/>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="180" 
            align="center"/>
          <el-table-column
            prop="createtime"
            label="创建时间" 
            align="center"/>
        </el-table>
      </el-form-item>



    </el-form>
  </el-dialog>
</template>

<script>

import { fetch} from '@/api/user'
import ProgressBar from '@/components/Progress'

const userType = {
  1:'金牌理财师',
  2:'银牌理财师',
};
export default {
  name: 'UserForm',
  components: {
    ProgressBar
  },
  filters:{
    userType:function (status) {
      return userType[status];
    }
  },
  data() {
    return {
      dialogStatus: '',
      addLoading: false,
      dialogFormVisible: false,
      Form: {
        nickname:'大河',
        mobile:'13546351623',
        createtime:'1900-12-26 12:11:00',
        goodat:'xxxx',
        joblimit:'xxxx',
        userType:1,
        avatar:'',
        son:[
          {
            'nickname':'dab',
            'mobile':'14635178231',
            'createtime':'1900-09-12 12:00:00',
          },
          {
            'nickname':'dab',
            'mobile':'14635178231',
            'createtime':'1900-09-12 12:00:00',
          },
        ],
      }
    }
  },
  methods: {
    formShow: function($row, $option, $type = 0) {
      this.dialogFormVisible = true
      // 编辑
      if ($type == 0) {
        this.Form = $row
        this.dialogStatus = '编辑-' + $option
      } else if ($type == 1) {
        this.Form.productCategory = $option
        this.dialogStatus = '添加-' + $option
      } else {
        this.dialogStatus = '详情'
      }

      fetch($row).then(res=>{
          if(res.data.code==1){
            this.Form = res.data.data;
          }else{
            this.$message({
              showClose: true,
              message: '获取数据失败',
              type: 'error'
            })
          }
        }
      ).catch(()=>{
          this.$message({
            showClose: true,
            message: '网络请求失败',
            type: 'error'
          })
      });

    },
  }
}
</script>

<style scoped>
  .scheduleInput{
    margin-bottom: 10px;
    margin-right: 30px;
  }
</style>

<style>
  .pswp--supports-fs{
    z-index: 9000;
  }
</style>
